<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/other/barcode/barcodeList' }">规则列表</el-breadcrumb-item>
      <el-breadcrumb-item>规则详情</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 数据表格 -->
      <div class="main-body top" style="height: 98%;">
        <autumn-table :isPage="false" :page="page" height="94%">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" @click="toView">新增</el-button>
            <el-button icon="el-icon-back" @click="cancel">返回</el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center" width="100">
              <template #default="scope">
                {{ barcodeTypes[scope.row.type] }}
              </template>
            </el-table-column>
            <el-table-column prop="value" label="值">
              <template #default="scope">
                {{ sequenceResets[scope.row.value] ? sequenceResets[scope.row.value] : scope.row.value }}
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center" width="80" />
            <el-table-column prop="extent" label="长度" :formatter="(row: any) => row.extent === 0 ? '' : row.extent" />
            <el-table-column prop="delimit" label="分隔符" />
            <el-table-column prop="remark" label="备注" width="100" />
            <el-table-column prop="createName" label="创建人" width="100" />
            <el-table-column prop="createTime" label="创建时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column label="操作" fixed="right" align="center" width="120">
              <template #default="scope">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-edit" size="small" title="编辑" @click="toView(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除" @click="del(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import hooks from 'src/hook/index'
import { $listDict, $confirmMsg, $moment } from 'src/util/tools'
import { listBarcodeRule, deleteBarcodeRule } from 'src/api/other/barcodeRule'

const router = useRouter()
const route = useRoute()

// 查询业务条码规则
const barcodeTypes = ref([])
barcodeTypes.value = $listDict('BARCODE_RULE')

// 查询序列重置规则
const sequenceResets = ref([])
sequenceResets.value = $listDict('SEQUENCE_RESET')

// 分页查询
const barcodeId = ref<string>('-1')
barcodeId.value = route.query.barcodeId as string
const { page, initIndex, search } = hooks.useTable(() => {
  listBarcodeRule(barcodeId.value).then(({ data }) => {
    page.data = data
  })
})

// 启/禁用
const del = (row: any) => {
  const ids = [row.id]
  $confirmMsg('确认删除吗？', () => {
    deleteBarcodeRule(ids).then(data => {
      search()
    })
  })
}

// 查看
const toView = (row: any, type?: string) => {
  const id = row.id
  router.push({
    path: type ? '/other/barcodeRule/barcodeRuleView' : '/other/barcodeRule/barcodeRuleForm',
    query: { id, barcodeId: barcodeId.value }
  })
}

// 取消
const cancel = () => {
  router.push('/other/barcode/barcodeList')
}
</script>

<style lang="scss" scoped></style>
